<template>
  <line @click.stop="nodeClick(item)" :class="activeClassName" :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
    style="
      stroke: rgb(59 19 222);
      stroke-width: 2;
      stroke-dasharray: 5;
      animation: dashdraw 0.5s linear infinite;
    ">
  </line>
</template>

<script>
import { v4 as uuid } from "uuid";
export default {
  name: "FlowLine",
  props: {
    item: {
      type: Object,
      default: () => { },
    },
    acive: {
      type: Boolean,
      default: false,
    },
  },
  directives: {
    move: {
      inserted(el, binding, vnode) {
        const self = vnode.context
        const odiv = el;
        odiv.onmousedown = (e) => {
          const disX = e.clientX - odiv.offsetLeft;
          const disY = e.clientY - odiv.offsetTop;
          document.onmousemove = (e1) => {
            const left = e1.clientX - disX;
            const top = e1.clientY - disY;
            self.item.x = left;
            self.item.y = top;
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  computed: {
    activeClassName() {
      if (this.active) {
        return "active";
      } else {
        return "";
      }
    },
    typeClassName() {
      if (this.item.type === "start") {
        return "circular";
      } else if (this.item.type === "end") {
        return "circular";
      } else {
        return "rectangle";
      }
    },
  },
  data() {
    return {
      active: "",
    };
  },
  methods: {
    nodeClick(element) {
      this.$emit("lineClick", element);
    },
    nodeMouseover(element) {
      this.$emit('nodeClick', element)
    },
    nodeMouseout(element) {
      //  this.$emit('nodeClick', element)
    },
    nodePointMousedown(element, postion) {
      let x1 = this.item.x;
      let y1 = this.item.value.y;
      if (postion === "top") {
        x1 = x1 + this.item.width / 2;
      } else if (postion === "bottom") {
        x1 = x1 + this.item.width / 2;
        y1 = y1 + this.item.height;
      } else if (postion === "left") {
        y1 = y1 + this.item.height / 2;
      } else if (postion === "right") {
        x1 = x1 + this.item.width;
        y1 = y1 + this.item.height / 2;
      }
      const lineStart = {
        id: uuid(),
        type: "line",
        backgroundColor: "gray",
        x1: x1,
        y1: y1,
        x2: 0,
        y2: 0,
        fromNodeId: this.item.value.id,
        toNodeId: "",
        fromPosition:postion,
      };
      localStorage.setItem("line", JSON.stringify(lineStart));
    },
    nodePointMouseup(element, postion) {
      let x2 = this.item.x;
      let y2 = this.item.y;
      if (postion === "top") {
        x2 = x2 + this.item.width / 2;
      } else if (postion === "bottom") {
        x2 = x2 + this.item.width / 2;
        y2 = y2 + this.item.height;
      } else if (postion === "left") {
        y2 = y2 + this.item.height / 2;
      } else if (postion === "right") {
        x2 = x2 + this.item.width;
        y2 = y2 + this.item.height / 2;
      }
      const lineStr = localStorage.getItem("line");
      const lineEnd = lineStr && JSON.parse(lineStr);
      lineEnd.x2 = x2;
      lineEnd.y2 = y2;
      lineEnd.toNodeId = this.item.id;
      lineEnd.toPosition = postion;
      console.log("x2", x2, postion);
      console.log("y2", y2, postion);
      this.$emit("createLine", lineEnd);
    },
    nodeDelete(e) {
     
    },
  },
};
</script>

<style scoped lang="scss">
.node-item {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  pointer-events: all;
  visibility: visible;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;

  .node-point {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgb(0, 255, 21);
    border-radius: 100%;
    pointer-events: all;
    cursor: crosshair;
  }

  .top {
    top: -8px;
    left: 50%;
  }

  .bottom {
    bottom: -8px;
    left: 50%;
  }

  .left {
    top: 50%;
    left: -8px;
  }

  .right {
    top: 50%;
    right: -8px;
  }

  .icon {
    height: 48px;
    width: 48px;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -24px;
    line-height: 48px;
    border-radius: 50%;
    background-color: #a7d1e6;
  }

  .title {
    text-align: right;
    height: 100%;
    width: 60%;
    position: absolute;
    right: 22px;
  }
}

.active {
  border: 3px solid green;
}

.circular {
  border-radius: 100%;
  width: 85px;
  height: 85px;
  background-color: green;
}

.rectangle {
  width: 150px;
  height: 85px;
  background-color: red;
}
</style>